<template>
	<div>
		<div>
			阶段奖励
			<el-button style="margin-left:15px;margin-top:6px" @click="addDomain">新增</el-button>
		</div>
		<el-form
			:model="dynamicValidateForm"
			ref="dynamicValidateForm"
			class="demo-dynamic"
			size="mini"
		>
			<div
				style="width:100%"
				v-for="(item, index) in dynamicValidateForm.domains"
				:key="index"
			>
				<el-row>
					<el-col :span="12">
						<el-form-item
							label="阶段金币门槛"
							:prop="'domains.' + index + '.quota'"
							:key="index"
							:rules="{
								required: true,
								message: '请输入阶段金币门槛',
								trigger: 'blur'
							}"
						>
							<el-input-number
								v-model="item.quota"
								controls-position="right"
								:min="0"
								:step="1"
								:precision="0"
								:max="9999999"
								@change="handleChange"
							></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="奖励金币"
							:prop="'domains.' + index + '.goldAmount'"
							:key="index"
							:rules="{
								required: true,
								message: '请输入奖励金币',
								trigger: 'blur'
							}"
						>
							<el-input-number
								v-model="item.goldAmount"
								controls-position="right"
								:min="0"
								:step="1"
								:precision="0"
								:max="9999999"
								@change="handleChange"
							></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="是否奖励商品" prop="isPrizeGood">
					<el-radio-group v-model="item.isPrizeGood" @change="handleChange">
						<el-radio label="1">是</el-radio>
						<el-radio label="2">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					v-if="item.isPrizeGood == 1"
					:prop="'domains.' + index + '.mdId'"
					:key="index"
					:rules="{
						required: true,
						message: '请选择活动商品',
						trigger: 'change'
					}"
				>
					<el-select
						clearable
						v-model="item.mdId"
						placeholder="请选择活动商品"
						@change="handleChange"
					>
						<el-option
							v-for="(item, index) in goodsList"
							:key="index"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-button @click.prevent="removeDomain(item)">删除</el-button>
			</div>
		</el-form>
	</div>
</template>
<script>
export default {
	data() {
		return {
			dynamicValidateForm: {
				domains: [
					{
						quota: '',
						goldAmount: '',
						isPrizeGood: '2',
						mdId: ''
					}
				]
			},
			reset: true,
			goodsList: []
		};
	},
	props: {
		value: null,
		time: [String, Array]
	},
	watch: {
		value(val) {
			this.dynamicValidateForm.domains = val;
		}
	},

	mounted() {
		this.$service.goodsMenagement.mdGoods
			.page({
				page: 1,
				size: 100,
				status: 1,
				type: 9,
				startTime: this.time[0],
				endTime: this.time[1]
			})
			.then(res => {
				let arr = [];
				res.list.map(item => {
					arr.push({
						label: item.title,
						value: Number(item.id)
					});
				});
				this.goodsList = arr;
			})
			.catch(err => {
				this.$message.error(err);
			});
		this.handleChange();
	},
	methods: {
		removeDomain(item) {
			var index = this.dynamicValidateForm.domains.indexOf(item);
			if (index !== -1) {
				this.dynamicValidateForm.domains.splice(index, 1);
			}
			this.handleChange();
		},
		addDomain() {
			this.dynamicValidateForm.domains.push({
				quota: '',
				goldAmount: '',
				isPrizeGood: '2',
				mdId: ''
			});
			this.handleChange();
		},
		handleChange() {
			let arr = [];
			this.dynamicValidateForm.domains.forEach(item => {
				if (item.mdId) {
					let goods = this.goodsList.find(i => i.value == item.mdId);
					item.mdName = goods.label;
				} else {
					item.mdName = '';
				}
				arr.push(item);
			});

			let str = JSON.stringify(arr);
			this.$emit('input', str);
		}
	}
};
</script>
<style scoped lang="scss">
::v-deep .el-input-number.is-controls-right .el-input__inner {
	padding-left: 15px;
	padding-right: 25px;
}
::v-deep .el-input-number--mini {
	width: 120px;
	margin-right: 10px;
}
.demo-dynamic {
	display: flex;
	flex-wrap: wrap;
}
</style>
